import React,{PureComponent} from 'react'
import Item from './Item'

// 使用PureComponent之后，只有父组件传进来的值变化时，才会更新
export default class Child2Child extends PureComponent {
  // 性能优化：1.减少操作dom的次数 2.减少涉及到dom的数量
  // 1. shouldComponentUpdate返回false，就不会执行render方法
  // 2. componentWillUnmount，可以清除监听，清除事件、变量
  // 3. PureComponent 数据的浅对比，用在类组件上。假设父组件有val1/val2/val3/val4四个变量。只有val3和val4的变化会引起子组件的更新，val1、val2的变化不会使子组件更新
  // 4.React.memo（记忆）用在函数组件上
  // 5. fragment，(片段，截取出来的一部分)作用就是避免增加额外的嵌套元素
  render() {
    console.log('=====我渲染了=====');
    return (
      <div>
        <p>我是child2的child</p>
        <div>{this.props.val4}</div>
        <ul>
         <Item></Item>
        </ul>
      </div>
    )
  }
}
